<template>
	<div class="box">
		<el-table :data="tableData" stripe style="width: 100%" highlight-current-row>
			<el-table-column prop="date" label="Date" />
			<el-table-column prop="name" label="Name" />
			<el-table-column prop="address" label="Address" />
			<el-table-column label="Operations">
				<template #default="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
					<el-button size="small" type="danger"
						@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup>
	import {
		reactive
	} from 'vue';

	const tableData = reactive([{
			date: '2016-05-03',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles',
		},
		{
			date: '2016-05-02',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles',
		},
		{
			date: '2016-05-04',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles',
		},
		{
			date: '2016-05-01',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles',
		},
	])

	const handleEdit = (index, row) => {
		console.log(index, row)
	}
	const handleDelete = (index, row) => {
		console.log(index, row)
	}
</script>

<style scoped>
</style>